<template>
	<div class="container">
		<div class="flex-container">
			<div class="flex-item">
				<el-select v-model="options.mode" placeholder="类型选择">
					<el-option v-for="item in options.modeItems" :key="item.sign" :label="item.name" :value="item.sign" />
				</el-select>
			</div>
		</div>
		<el-table v-loading="dataset.loading" :data="dataset.items" class="el-mb-15" stripe>
			<el-table-column prop="ordernumber" label="订单号" />
			<el-table-column prop="username" label="名称" />
			<el-table-column prop="znumber" label="总重量" />
			<el-table-column prop="price" label="总价格" />
			<el-table-column prop="create_time" label="下单时间" />
		</el-table>
		<el-pagination
            @size-change="eventUpdateRequestLimit" @current-change="controllerRequestListDataset"
            :current-page="dataset.page" :page-size="dataset.limit" :total="dataset.total"
            :page-sizes="[10, 50, 100, 200, 300]" layout="total, sizes, prev, pager, next, jumper"
        />
	</div>
</template>

<script>
	import {
		Table, TableColumn, Pagination,
        Button,
        Select, Option,
		Drawer, Dialog,
		MessageBox, Message
	} from "element-ui";

	export default {
		components: {
			[Table.name]: Table, [TableColumn.name]: TableColumn,
			[Pagination.name]: Pagination,
            [Button.name]: Button,
            [Select.name]: Select, [Option.name]: Option,
			[Drawer.name]: Drawer, [Dialog.name]: Dialog
		},
		data() {
			return {
				options: {
					mode: 2,
					modeItems: [
						{
							name: "待确认",
							sign: 2
						},
						{
							name: "已上交",
							sign: 5
						},
						{
							name: "已取消",
							sign: 6
						}
					]
				},
				dataset: {
					loading: false,
					total: 0, limit: 10, page: 1,
					items: []
				}
			}
		},
		mounted() {
			this.controllerRequestListDataset();
		},
		methods: {
            // 获取门店订单数据列表
			controllerRequestListDataset(page) {
				if (this.dataset.loading) return; else this.dataset.loading = true;
				if (page) this.dataset.page = page;

				var url = '/api/admin/order/getlist',
					params = {
                        page: this.dataset.page - 1, list_rows: this.dataset.limit,
                        utype: 2,
                        status: this.options.mode,
                        token: this.$store.state.options.user.token
					};

				this.$util.postRequestInterface(url, params, {
					success: (res) => {
                        this.dataset.total = res.data.count;
						this.dataset.items = res.data.data.map((data, index, arr) => {
                            data.create_time = this.$moment(parseInt(data.create_time) * 1000).format('YYYY-MM-DD HH:mm:ss');
                            return data;
                        });
                    },
                    fail: (frs) => {
                        this.dataset.items = [];
                    },
					complete: (e) => {
						this.dataset.loading = false;
					}
				});
			},
			eventUpdateRequestLimit(limit) {
				if (this.dataset.loading) return;

				this.dataset.limit = limit;
				this.dataset.page = 1;
				this.dataset.total = 0;

				this.controllerRequestListDataset();
			}
		},
		watch: {
			"options.mode"(nVal, oVal) {
				this.options.mode = nVal;

				this.controllerRequestListDataset();
			}
		}
	};
</script>

<style lang="scss" scoped>
</style>
